<div id="mapa" style="height: 100%">
<div id="marcador_info">
  <p class="marker_data">
    Mostrando la ubicación del siniestro, presionar sobre el punto para mostrar la ruta sugerida.
  </p>
  <div class="marker-arrow"></div>
</div>
<div id="map-canvas"></div>

<script>
  google.maps.visualRefresh = true;
  latitud = 19.6830843;
  longitud = -99.0788252;

    var map;
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    var current = new google.maps.LatLng(latitud, longitud);
    var sucursales = {};
    var isuc = 1;
    sucursales[0] = {
        "longitud": longitud,
        "latitud": latitud,
        "icon": "images/blue-user-icon.png",
        "title": "Mi ubicación",
        "schedule": "",
        "content": ""
    };
    sucursales[1] = {
        "longitud": -99.1645837,
        "latitud": 19.6215702,
        "icon": "images/pointer.png",
        "title": "Mi ubicación",
        "schedule": "",
        "content": ""
    };

    var mapOptions = {
        zoom: 11,
        zoomControl: false,
        center: current,
        disableDefaultUI: true
    };

    directionsDisplay = new google.maps.DirectionsRenderer();
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    directionsDisplay.setMap(map);
    
    var infowindow = new google.maps.InfoWindow();
    
    for (i in sucursales) {
        
        var markerposition = new google.maps.LatLng(sucursales[i].latitud, sucursales[i].longitud);
        
        var marker = new google.maps.Marker({
            position: markerposition,
            map: map,
            icon: sucursales[i].icon,
            title: sucursales[i].title,
            animation: google.maps.Animation.DROP
        });

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                map.panTo(marker.getPosition());
                var info = sucursales[i].content + '<br>' + '<span class="navy_blue">' + sucursales[i].schedule + '</span>';
                        var dest = new google.maps.LatLng(sucursales[i].latitud, sucursales[i].longitud);
                        var request = {
                            origin: current,
                            destination: dest,
                            travelMode: google.maps.TravelMode.DRIVING
                        };
                        directionsService.route(request, function(result, status) {
                            if (status == google.maps.DirectionsStatus.OK) {
                                directionsDisplay.setDirections(result);
                            }
                        });
            }
        })(marker, i));
    }

function FormatNumber(Number, Decimals) {
    Number = "" + Number;
    Decimals = "" + Decimals;
    var OriginalNumber = Number;
    var Sign = 1;
    var Pad = "";
    var Count = 0;
    if (parseFloat(Number)) {
        Number = parseFloat(Number);
    } else {
        Number = 0;
    }
    if ((parseInt(Decimals, 10)) || (parseInt(Decimals, 10) == 0)) {
        Decimals = parseInt(Decimals, 10);
    } else {
        Decimals = 2;
    }
    if (Number < 0) {
        Sign = -1;
        Number *= Sign;
    }
    if (Decimals < 0)
        Decimals *= -1;
    Number = "" + Math.floor(Number * Math.pow(10, Decimals + 1) + 5);
    if ((Number.substring(1, 2) == '.') || (Number == 'NaN'))
        return (OriginalNumber);
    if (Number.length < Decimals + 1) {
        for (Count = Number.length; Count <= Decimals; Count++)
            Pad += "0"
    }
    Number = Pad + Number;
    if (Decimals == 0) {
        Number = Number.substring(0, Number.length - 1)
    } else {
        Number = Number.substring(0, Number.length - Decimals - 1) + "." +
            Number.substring(Number.length - Decimals - 1, Number.length - 1);
    }
    if (Sign == -1)
        Number = "-" + Number;
    return (Number);
}

//Calcula la distancia entre 2 puntos

function getDistance(lat1, lon1, lat2, lon2) {
    var degtorad = 0.01745329;
    var radtodeg = 57.29577951;
    var lat1 = parseFloat(FormatNumber(lat1, 7));
    var lat2 = parseFloat(FormatNumber(lat2, 7));
    var long1 = parseFloat(FormatNumber(lon1, 7));
    var long2 = parseFloat(FormatNumber(lon2, 7));
    var dlong = (long1 - long2);
    var dvalue = (Math.sin(lat1 * degtorad) * Math.sin(lat2 * degtorad)) + (Math.cos(lat1 * degtorad) * Math.cos(lat2 * degtorad) * Math.cos(dlong * degtorad));
    var dd = Math.acos(dvalue) * radtodeg;
    var km = (dd * 111.302);
    km = (km * 100) / 100;
    var distance = FormatNumber(km, 2);
    return distance;
}


</script>